<template>
	<view class='page'>
		<view class='merchant'>
			<view class='merchant-back'></view>
			<view class='merchant-main'>

				<view class='merchant-header'>
					<view class='merchant-header-left'>
						<image :src="myData.shop_avatar"></image>
					</view>
					<view class='merchant-header-right'>
						<view class='merchant-name'>{{myData.name}}</view>
						<view class='merchant-brief'>
							店铺简介：{{myData.introduce}}
						</view>
					</view>
				</view>

				<view class='merchant-list'>
					<view class='merchant-list-business'>
						<text class='information'>{{myData.page_count}}</text>
						<text>人气</text>
					</view>
					<navigator url="./my-group/my-group" hover-class="none" class='merchant-list-business'>
						<text class='information'>{{myData.typeBusCount}}</text>
						<text>团购报名</text>
					</navigator>
					<navigator url="./my-salesman/my-salesman" hover-class="none" class='merchant-list-business'>
						<text class='information'>{{myData.typeUserCount}}</text>
						<text>我的客户</text>
					</navigator>

					<navigator url="./my-collection/my-collection" hover-class="none" class='merchant-list-business'>
						<text class='information'>{{myData.typeFavCount}}</text>
						<text>收藏人数</text>
					</navigator>
				</view>

			</view>

		</view>

		<view class='shop'>
			<navigator :url="'../establish-merchant/establish-merchant?id='+myData.id" class='shop-list' hover-class="none">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/myshop/myMer_compile.png'></image>
				<text>编辑店铺</text>
			</navigator>
			<navigator :url="'../merchant?merId='+myData.id+'&userId='+myData.user_id+'&type='" class='shop-list' hover-class="none">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/myshop/myMer_check.png'></image>
				<text>查看店铺</text>
			</navigator>
			<navigator :url="'./apply-group/apply-group?id='+myData.id+'&type=2'" class='shop-list' hover-class="none">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/myshop/myMer_group.png'></image>
				<text>团购管理</text>
			</navigator>
			<navigator url="" class='shop-list' hover-class="none">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/myshop/myMer_salesman.png'></image>
				<text>客户管理</text>
			</navigator>
			<navigator :url="'../../user-center/my-info/poster/poster?id='+myData.user_id" class='shop-list' hover-class="none">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/myshop/myMer_publicity.png'></image>
				<text>宣传海报</text>
			</navigator>
			<view @tap='goVideo' class='shop-list' hover-class="none">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/myshop/myMer_video.png'></image>
				<text>宣传视频</text>
			</view>
			<navigator :url="'../merchant?merId='+myData.id+'&userId='+myData.user_id+'type='" class='shop-list' hover-class="none">
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/myshop/myMer_share.png'></image>
				<text>分享店铺</text>
			</navigator>
			<view class='shop-list' @tap='phonecallevent' data-tel='13007421866'>
				<image src='https://gy-files.oss-cn-shenzhen.aliyuncs.com/picture/merchant/myshop/myMer_relation.png'></image>
				<text>联系客服</text>
			</view>
		</view>

	</view>
</template>

<script>
	import app from '@/App.vue';
	import {
		GYZJMODEL as gyzjModel
	} from '@/utils/gyzjModel.js'
	export default {
		onLoad(options) {
			var arr = this.main_getGlobal();
			gyzjModel.prototype.myMerchants(arr.token, arr.type).then(res => {
				switch (res.code) {
					case 1:
						this.myData = res.data.data[0];
					default:
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
						break;
				}
			})
		},
		data() {
			return {
				myData: '',
			}
		},
		methods: {
			 //拨打电话
			  phonecallevent: function (e) {
			    console.log(e.currentTarget.dataset.tel)
			    uni.makePhoneCall({
			      phoneNumber: e.currentTarget.dataset.tel
			    })
			  },
		}

	}
</script>

<style>
	.merchant {
		width: 100%;
		height: 400upx;
		position: relative;
	}

	.merchant-back {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background-color: #FDCB45;
	}

	.merchant-main {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.merchant-header {
		padding: 20upx;
		display: flex;
		align-items: center;
	}

	.merchant-header-left {
		width: 140upx;
		height: 140upx;
		margin: 0 20upx;
	}

	.merchant-header-left image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.merchant-header-right {
		width: 70%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.merchant-name {
		font-size: 36upx;
		font-weight: 600;
		color: #000;
		margin-bottom: 10upx;
	}

	.merchant-brief {
		width: 100%;
		font-size: 26upx;
		color: #000;
		border-radius: 5upx;
		display: -webkit-box;
		word-break: break-all;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.merchant-limited {
		display: flex;
		align-items: center;
		font-size: 22upx;
		color: #fff;
		margin-bottom: 10upx;
	}

	.upgrade {
		padding: 4upx 20upx;
		background-color: #FAE158;
		color: #f94c48;
		border-radius: 45upx;
		margin-left: 10upx;
	}

	.merchant-list {
		width: 100%;
		display: flex;
		margin-top: 20upx;
	}

	.merchant-list-business {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		border-right: 1px solid #ccc;
		color: #000;
		font-size: 28upx;
	}

	.merchant-list-business:nth-child(4) {
		border-right: none;
	}

	.information {
		font-weight: 600;
		font-size: 34upx;
	}


	.shop {
		width: 100%;
		display: flex;
		background-color: #fff;
		flex-wrap: wrap;
		padding: 20upx 0;
		font-size: 30upx;
		color: #565656;
	}

	.shop-list {
		width: 25%;
		height: 180upx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/* border-right: 1px solid #eee; */
	}

	.shop-list image {
		width: 80upx;
		height: 80upx;
		margin-bottom: 10upx;
	}
</style>
